<template>
  <div>
    <div class="container">
      <div class="sign">
        <span class="fast-flicker">R</span>u Qi<span class="flicker">an</span>g
      </div>
      <!-- <div class="body"></div> -->
      <div class="party" title=":party:">
        <a title=":party:" href="https://goabstract.com">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </a>
      </div>

      <div id="glasses-wrap">
        <div id="glasses"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.container {
  width: 1040px;
  height: 80px;
  float: left;
}
@font-face {
  font-family: Clip;
  src: url("https://acupoftee.github.io/fonts/Clip.ttf");
}

.sign {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 50%;
  background-image: radial-gradient(
    ellipse 50% 35% at 50% 50%,
    #6b1839,
    transparent
  );
  transform: translate(-50%, -50%);
  letter-spacing: 2;
  left: 50%;
  top: 50%;
  font-family: "Clip";
  text-transform: uppercase;
  font-size: 6em;
  color: #ffe6ff;
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
    -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
    0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  animation: shine 2s forwards, flicker 3s infinite;
}

@keyframes blink {
  0%,
  22%,
  36%,
  75% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
      -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
      0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  }
  28%,
  33% {
    color: #ff65bd;
    text-shadow: none;
  }
  82%,
  97% {
    color: #ff2483;
    text-shadow: none;
  }
}

.flicker {
  animation: shine 2s forwards, blink 3s 2s infinite;
}

.fast-flicker {
  animation: shine 2s forwards, blink 10s 1s infinite;
}

@keyframes shine {
  0% {
    color: #6b1839;
    text-shadow: none;
  }
  100% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
      -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
      0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  }
}

@keyframes flicker {
  from {
    opacity: 1;
  }

  4% {
    opacity: 0.9;
  }

  6% {
    opacity: 0.85;
  }

  8% {
    opacity: 0.95;
  }

  10% {
    opacity: 0.9;
  }

  11% {
    opacity: 0.922;
  }

  12% {
    opacity: 0.9;
  }

  14% {
    opacity: 0.95;
  }

  16% {
    opacity: 0.98;
  }

  17% {
    opacity: 0.9;
  }

  19% {
    opacity: 0.93;
  }

  20% {
    opacity: 0.99;
  }

  24% {
    opacity: 1;
  }

  26% {
    opacity: 0.94;
  }

  28% {
    opacity: 0.98;
  }

  37% {
    opacity: 0.93;
  }

  38% {
    opacity: 0.5;
  }

  39% {
    opacity: 0.96;
  }

  42% {
    opacity: 1;
  }

  44% {
    opacity: 0.97;
  }

  46% {
    opacity: 0.94;
  }

  56% {
    opacity: 0.9;
  }

  58% {
    opacity: 0.9;
  }

  60% {
    opacity: 0.99;
  }

  68% {
    opacity: 1;
  }

  70% {
    opacity: 0.9;
  }

  72% {
    opacity: 0.95;
  }

  93% {
    opacity: 0.93;
  }

  95% {
    opacity: 0.95;
  }

  97% {
    opacity: 0.93;
  }

  to {
    opacity: 1;
  }
}
// .body {
// transform: translateY(-40px);
// margin-left: 650px;

//   display: grid;
//   place-items: center;
// }
// .body {
//   width: 150px;
//   height: 150px;
//   background-image: linear-gradient(
//     to right,
//     oklch(70.5% 0.111 0),
//     oklch(70.5% 0.111 30),
//     oklch(70.5% 0.111 60),
//     oklch(70.5% 0.111 90),
//     oklch(70.5% 0.111 120),
//     oklch(70.5% 0.111 150),
//     oklch(70.5% 0.111 180),
//     oklch(70.5% 0.111 210),
//     oklch(70.5% 0.111 240),
//     oklch(70.5% 0.111 270),
//     oklch(70.5% 0.111 300),
//     oklch(70.5% 0.111 330),
//     oklch(70.5% 0.111 360)
//   );
//   background-size: 100vmin 100vmin;
//   -webkit-mask: url(https://assets.codepen.io/3/manatee.png);
//   -webkit-mask-size: contain;
//   -webkit-mask-repeat: no-repeat;
//   animation: rainbow 2s linear infinite;
// }

// @keyframes rainbow {
//   to {
//     background-position: 100vmin 0;
//   }
// }
$unit: 8px;
$black-1: #222;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  color: inherit;
  outline: none;
  font-weight: inherit;
  font-size: 1em;
}

body {
  background-color: #3d3e6f;
}

.party {
  margin-left: 350px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: $unit * 6;
  height: $unit * 6;
  * {
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  &:before {
    content: "";
    border-right: $unit * 3 solid transparent;
    border-bottom: $unit * 3 solid #b4b4f3;
    border-left: $unit * 3 solid transparent;
    width: $unit * 6;
    height: $unit * 6;
    animation: party-body 0.5s linear infinite;
  }
  ul {
    width: $unit * 4;
    height: $unit * 4;
    border-radius: 50%;
    background: #7272e9;
    position: absolute;
    top: 0;
    left: $unit;
    animation-name: party-head;
    li {
      &:nth-child(3) {
        border-left: $unit * 0.5 solid transparent;
        border-top: $unit * 2 solid #f5d875;
        border-right: $unit * 0.5 solid transparent;
        width: 0;
        height: 0;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateY(-50%);
      }
      &:nth-child(2) {
        background: $black-1;
        border-radius: 50%;
        width: $unit * 0.75;
        height: $unit * 0.75;
        position: absolute;
        top: $unit;
        left: $unit;
      }
      &:nth-child(1) {
        background: $black-1;
        border-radius: 50%;
        width: $unit * 0.75;
        height: $unit * 0.75;
        position: absolute;
        top: $unit;
        right: $unit / 2;
      }
      &:nth-child(4) {
        border-top: $unit * 0.75 solid transparent;
        border-left: $unit * 0.75 solid #3df2c2;
        border-bottom: $unit * 0.75 solid transparent;
        width: 0;
        height: 0;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateY(-50%);
        animation-name: party-plume;
      }
    }
  }
}

@keyframes party-body {
  0%,
  100% {
    border-right-width: $unit * 3;
    border-left-width: $unit * 3;
    border-bottom-color: #b4b4f3;
  }
  25% {
    border-right-width: $unit * 5.5;
    border-left-width: $unit * 0.5;
    border-bottom-color: #70eefa;
  }
  50% {
    border-right-width: $unit * 3;
    border-left-width: $unit * 3;
    border-bottom-color: #a7f9e3;
  }
  75% {
    border-right-width: $unit * 1.5;
    border-left-width: $unit * 4.5;
    border-bottom-color: #ff6270;
  }
}

@keyframes party-head {
  0%,
  100% {
    transform: translate(0%, 0%) rotate(0deg);
    background: #7272e9;
  }
  25% {
    transform: translate(-37.5%, 12.5%) rotate(22.5deg);
    background: #51cfdb;
  }
  50% {
    transform: translate(0%, 25%);
    background: #3ad4ac;
  }
  75% {
    transform: translate(25%, 12.5%) rotate(-11.25deg);
    background: #e04351;
  }
}

@keyframes party-glasses {
  0%,
  100% {
    transform: translate(-5%, -5%) rotate(0deg) scale(0.6);
  }
  25% {
    transform: translate(-7.5%, -7.5%) rotate(22.5deg) scale(0.8);
  }
  50% {
    transform: translate(-5%, -6%) scale(0.4);
  }
  75% {
    transform: translate(-6%, -7.5%) rotate(-11.25deg) scale(0.6);
  }
}

@keyframes party-plume {
  0%,
  100% {
    border-left-color: #3df2c2;
  }
  25% {
    border-left-color: #7272e9;
  }
  50% {
    border-left-color: #ff479e;
  }
  75% {
    border-left-color: #ff8c62;
  }
}

@keyframes move-down {
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
#glasses-wrap {
   margin-left: 350px;
  transform: translate(-50%, -500%) scale(4);
  animation: move-down 4s linear forwards;
  position: absolute;
  top: 50%;
  left: 50%;
}

#glasses {
  width: 120px;
  height: 120px;
  animation: party-glasses 0.5s 4s linear infinite;
}

#glasses::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background: transparent;
  box-shadow: 30px 42px #ffffff, 36px 42px #ffffff, 48px 42px #ffffff,
    42px 42px #ffffff, 78px 48px #ffffff, 54px 42px #ffffff, 60px 42px #ffffff,
    66px 42px #ffffff, 84px 42px #ffffff, 90px 42px #ffffff, 78px 42px #ffffff,
    72px 42px #ffffff, 96px 42px #ffffff, 102px 42px #ffffff, 114px 42px #ffffff,
    108px 42px #ffffff, 114px 48px #ffffff, 108px 54px #ffffff,
    102px 60px #ffffff, 96px 60px #ffffff, 90px 60px #ffffff, 6px 48px #ffffff,
    0px 48px #ffffff, 12px 42px #ffffff, 24px 42px #ffffff, 18px 42px #ffffff,
    84px 54px #ffffff, 72px 48px #ffffff, 66px 54px #ffffff, 60px 60px #ffffff,
    54px 66px #ffffff, 48px 66px #ffffff, 42px 66px #ffffff, 24px 48px #ffffff,
    30px 54px #ffffff, 36px 60px #ffffff;
}
</style>
